<template>
  <el-drawer
    class="ui-drawer"
    :class="[{'has-modal': modal}, 'ui-drawer--' + size]"
    :visible.sync="innerVisible"
    :with-header="false"
    :size="innerSize"
    :direction="innerDir"
    :modal="innerModal"
    :append-to-body="true"
    :wrapper-closable="modalClose"
    @open="handleOpen"
    @closed="handleClose"
  >
    <div class="ui-drawer__tools">
      <div class="ui-drawer__close" v-if="closable" @click="handleCloseClick" title="关闭">
        <span class="ui-drawer__close-icon"></span>
      </div>
    </div>
    <div class="ui-drawer__main">
      <div v-if="title" class="ui-drawer__head">
        <strong class="ui-drawer__title">{{ title }}</strong>
      </div>
      <div class="ui-drawer__body">
        <slot v-if="visible"></slot>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import ElDrawer from 'element-ui/lib/drawer'
import 'element-ui/lib/theme-chalk/drawer.css'
import { unique } from '@/utils/string'
import { getDrawerNumber, selfAddDrawerNumber, selfSubDrawerNumber } from './utils'

export default {
  name: 'UiDrawer',
  components: {
    ElDrawer
  },
  model: {
    prop: 'visible',
    event: 'input'
  },
  props: {
    visible: {
      type: Boolean
    },
    direction: {
      type: String,
      validator (value) {
        return ['left', 'top', 'bottom', 'right'].includes(value)
      }
    },
    title: {
      type: String
    },
    closable: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'mini',
      validator(value) {
        return ['mini', 'small', 'medium', 'auto', 'large'].includes(value)
      }
    },
    modal: {
      type: null
    },
    modalClose: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      autoModal: null
    }
  },
  computed: {
    innerModal () {
      if (this.modal === undefined) {
        return this.autoModal
      } else {
        return !!this.modal
      }
    },
    innerDir () {
      const map = {
        left: 'ltr',
        top: 'ttb',
        bottom: 'btt',
        right: 'rtl'
      }
      return map[this.direction]
    },
    innerSize() {
      let size
      if (this.size === 'mini') {
        size = '480px'
      } else if (this.size === 'small') {
        size = '640px'
      } else if (this.size === 'medium') {
        size = '780px'
      } else if (this.size === 'large') {
        size = '75%'
      } else if (this.size === 'auto') {
        size = 'auto'
      }
      return size
    },
    innerVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  created () {
    this.id = unique()
  },
  mounted () {
    const $app = window.document.getElementById('app')
    if ($app) {
      $app.addEventListener('click', this.handleDocumentClick)
    }
  },
  methods: {
    handleOpen () {
      selfAddDrawerNumber(this.id)
      if (getDrawerNumber() === 1) {
        this.autoModal = false
      } else {
        this.autoModal = true
      }
    },
    handleClose () {
      selfSubDrawerNumber(this.id)
      this.$emit('closed')
    },
    handleDocumentClick (evt) {
      this.innerVisible = false
    },
    handleCloseClick() {
      this.$emit('input', false)
    },
    close() {
      this.innerVisible = false
    }
  },
  beforeDestroy () {
    selfSubDrawerNumber(this.id)
  }
}
</script>
<style lang="less">
.ui-drawer .el-drawer{
  outline: 0;
  overflow: initial;
}
.ui-drawer.el-drawer__wrapper {
  outline: 0;
  &:not(.has-modal) {
    pointer-events: none;
    > .el-drawer__container{
      > .el-drawer{
        pointer-events: initial;
      }
    }
  }
}
.ui-drawer .el-drawer__body{
  min-height: 0;
}
.ui-drawer .el-drawer__header > span{
  outline: 0;
}
.ui-drawer__body{
  min-height: 0;
}
.ui-drawer__tools{
  position: absolute;
  left: -48px;
  top: 0px;
  width: 32px;
  z-index: 100;
  padding: 12px;
  background-color: #fff;
  box-shadow: -10px 0 16px rgba(0,0,0,.08);
  border-radius: 4px 0 0 4px;
  box-sizing: content-box;
}
.ui-drawer__close{
  position: relative;
  width: 32px;
  height: 32px;
  text-align: left;
  border-radius: 3px;
  cursor: pointer;
  transition: all .25s;
  &:hover {
    background-color: #f8f8f9;
  }
}
.ui-drawer__close-icon{
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
  vertical-align: top;
  margin-top: 6px;
  margin-left: 6px;
  &:before, &:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border: 2px solid #006ad4;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
  }
}
.ui-drawer__main{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ui-drawer__head{
  height: 32px;
  line-height: 32px;
  padding: 12px 20px;
  box-sizing: content-box;
  border-bottom: 1px solid #eee;
}
.ui-drawer__body{
  flex: 1;
  position: relative;
  min-height: 0;
  overflow: auto;
}
.ui-drawer__title {
  display: block;
  font-size: 18px;
  font-weight: normal;
}
.ui-drawer--large {
  .el-drawer {
    max-width: 1100px;
    min-width: 960px;
  }
}
</style>
